<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>我的采购</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../../../elementUI/index.css">
	<link rel="stylesheet" href="../../../css/index.css">
</head> 

<body>
	<div id="app">
       <title>订单详情</title>
		<el-table :data="tableData"  border style="width: 100%">
			<el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
			<el-table-column prop="Article_Name" label="商品名称" align="center"></el-table-column>
			<el-table-column align="center" prop="Quantity" label="交易量">
				<template v-slot="{ row }">
					{{ row.Quantity }}{{ row.Unit }}
				</template>
			</el-table-column>
			<el-table-column align="center" prop="Amount" label="交易金额">
				<template v-slot="{ row }">￥
					{{ (Number(row.Amount) * Number(row.Quantity)).toFixed(2) }}
				</template>
			</el-table-column>
			<el-table-column align="center" prop="Collection_Amount" label="已付金额">
				<template v-slot="{ row }">
					￥{{ Number(row.Collection_Amount).toFixed(2) }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="未付金额">
				<template v-slot="{ row }">
					￥
					{{
	  (
		Number(row.Amount) * Number(row.Quantity) -
		Number(row.Collection_Amount) 
	  ).toFixed(2)
	}}
				</template>
			</el-table-column>
			<el-table-column v-if="lock == 0" prop="Seller_Contact" label="卖方姓名"
				align="center"></el-table-column>
			<el-table-column v-else prop="Contacts" label="对方企业" align="center"></el-table-column>
			<el-table-column v-if="lock == 0" align="center" prop="Seller_Contact_Phone"
				label="联系人"></el-table-column>
			<el-table-column v-else align="center" prop="Contacts_Phone" label="对方手机号"></el-table-column>
		</el-table>
         <!-- 第二层楼 -->
		 <div style="font-weight: 700;padding: 10px;">运输信息</div>
         <el-table v-if="tableData1.length != 0" class="mt-2" :data="tableData1" border style="width: 100%">
			<el-table-column prop="Transport_Type" align="center" label="运输方式">
			</el-table-column>
			<el-table-column align="center" label="物流信息编号">
				<template v-slot="{ row }">
					<el-tooltip effect="dark" :content="row.Group_Seek_Logistics_SerialNumber"
						placement="top">
						<div class="text-ellipsis w-100">
							<span>{{ row.Group_Seek_Logistics_SerialNumber }}</span>
						</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="Article_Name" label="物流信息">
				<template v-slot="{ row }">
					<el-tooltip effect="dark" :content="row.Transport_Explain" placement="top">
						<div class="text-ellipsis w-100">
							<span>{{ row.Transport_Explain }}</span>
						</div>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<!-- 第三层楼 -->
		<div style="font-weight: 700;padding: 10px;">付款信息</div>
		<el-table :data="tableData.Paystages" border style="width: 100%">
			<el-table-column align="center" prop="Trading_Detail_Name" label="对方付款阶段"></el-table-column>
			<el-table-column align="center" prop="Trading_Amount" label="对方付款额度"></el-table-column>
			<el-table-column align="center" prop="Trading_Explain" label="对方付款金额"></el-table-column>
			<el-table-column align="center" prop="Trading_Date" label="最晚付款时间"></el-table-column>
		</el-table>
		<div class="p-4 bg-white mb-4">
            <div style="font-weight: 700;padding: 10px;">操作日志</div>
            <el-table :data="this.xiangqing"  border style="width: 100%" >
                <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
                <el-table-column align="center" prop="ID_Name" label="操作者"></el-table-column>
                <el-table-column align="center" prop="IP" label="IP地址"></el-table-column>
                <el-table-column align="center" prop="Operation_Datetime" label="操作时间"></el-table-column>
                <el-table-column prop="Config" label="操作" align="center"></el-table-column>
            </el-table>
        </div>
        <el-form>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-pagination style="margin-bottom: 100px;" background v-show="total > 0" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="form1.page" :page-sizes="[10,20,30,50]"
            :page-size="form1.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination> -->
    </div>
	</div>
	<script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
	<script type="text/javascript" src="../../../js/vue.min.js"></script>
	<script type="text/javascript" src="../../../elementUI/index.js"></script>
	<script type="text/javascript" src="../../../js/utils.js"></script>
	<script type="text/javascript" src="./js/produre_detail.js"></script>
</body>

</html>